<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .router-link-active {
            background-color: #f00;
        }

        /*首页自己的类名实现高亮*/
        .active {
            border: 1px solid gold;

        }

        .wrap {
            width: 100vw;
            height: 100vh;
            background-color: #cccc;
        }

        .wrap .header {
            width: 100vw;
            height: 20vh;
            background-color: #ddd;
            line-height: 20vh;
            text-align: center;
        }

        .wrap .content {
            width: 100vw;
            height: 80vh;
            background-color: #999;
        }

        .wrap .content .left {
            float: left;
            width: 20vw;
            border-right: 10px solid #00ff00;
            height: 80vh;

        }

        .wrap .content .right {
            float: right;
            width: 80vw;
            height: 80vh;
            background-color: #fff;
        }

    </style>

</head>
<body>
<div id="hashapp">

    <router-view></router-view>

</div>

</body>

<script src="lib/vue.js"></script>
<script src="lib/vue-router.js"></script>

<script type="text/javascript">
    const Login = {
        methods: {
            goDashboard() {
                this.$router.push('/admin');
            }
        },
        template: `
            <div>
                <h2>系统登录页面</h2>
                <form action="">
                <div>
                用户名：<input type="text">
                </div>
                <div>
                    密码：<input type="password" name="" id="">
                </div>
                <div>
                    <input type="submit" @click.prevent="goDashboard" value="登录">
                </div>
                </form>
            </div>
        `
    }


    const Dashboard = {
        template: `
            <div class="wrap">
                <div class="header">
                   <h2>后台首页</h2>

                </div>
                <div class="content">
                    <div class="left">
                        <ul>
                        <li><router-link to="/admin/order/list">订单列表</router-link></li>
                        <li><router-link to="/admin/manager/list">管理员列表</router-link></li>
                        <li><router-link to="/admin/member/list">会员列表</router-link></li>
                        </ul>
                    </div>
                    <div class="right">
                        <p>router-view 是 后台首页里面的子页面的路由的出口</p>

                        <router-view></router-view>
                    </div>
                </div>


            </div>
        `
    }

    const OrderList = {
        template: `
            <div>
                <h3>订单列表</h3>

            </div>
        `
    }

    const Manager = {
        template: `
            <div>
                <h3>Manager</h3>

            </div>
        `
    }

    const Member = {
        template: `
            <div>
                <h3>Member</h3>

            </div>
        `
    }


    const AdminIndex = {
        template: `
            <div>
                <h3>AdminIndex</h3>
                <p>首页的首页一般都是图表展示</p>
                <p>echarts</p>

                <p>
                https://preview.pro.antdv.com/dashboard/workplace
                </p>
                <p>后台的首页，必须是登录之后才可以访问的，如果没有登录，则不可以访问。则这个时候，我们可以使用 路由守卫进行检测操作，一般也叫做 导航守卫，有的人也叫做 中间件。</p>
                <p>
                https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

                </p>
            </div>
        `
    }


    const routes = [
        {
            path: '/',
            name: 'index',
            redirect: '/login',
        },
        {
            path: '/login',
            name: 'login',
            component: Login,
        },
        {
            path: '/admin',
            name: 'dashboard',
            component: Dashboard,
            /*后台首页默认展示的页面*/
            redirect: '/admin/index',
            children: [
                {
                    path: 'index',
                    name: 'index',
                    component: AdminIndex
                },
                /*1.  children 定义的路由是 后台首页的子路由
                * 2. 完整  path: 拿父路由（/admin） +  子路由（order/list）
                * 3. 在父页面定义一个子页面显示的区域
                * */
                {
                    /*子路由不需要写  / */
                    path: 'order/list',
                    name: 'order-list',
                    component: OrderList
                },
                {
                    path: 'manager/list',
                    name: 'manager',
                    component: Manager,
                },
                {
                    path: 'member/list',
                    name: 'member',
                    component: Member,
                }
            ]
        }

    ];

    const router = new VueRouter({
        routes: routes,
        linkActiveClass: 'active',
    })

    new Vue({
        el: "#hashapp",
        data: {},
        router: router,
    });
</script>

</html>
